@import './styles/mixins.scss';

.scroll-left {
  width: 24%;
  height: 100vh;
  background-color: #efedef;
  .category-tab {
    padding: 32rpx 24rpx;
    text-align: center;
    &.active {
      color: #f3514f;
      background-color: white;
      position: relative;
      &::before {
        content: '';
        width: 40rpx;
        height: 30rpx;
        background-color: #efedef;
        border-radius: 0rpx 0rpx 50% 0rpx;
        @include set-position(-30rpx, unset, absolute, 0rpx);
        z-index: 2;
      }
      &::after {
        content: '';
        width: 40rpx;
        height: 30rpx;
        background-color: #efedef;
        border-radius: 0rpx 50% 0rpx 0rpx;
        @include set-position(unset, unset, absolute, 0rpx, -30rpx);
      }
      // 小白底
      .bottom-block {
        &::before {
          content: '';
          width: 30rpx;
          height: 20rpx;
          background-color: white;
          @include set-position(-20rpx, unset, absolute, 0rpx);
        }
        &::after {
          content: '';
          width: 30rpx;
          height: 20rpx;
          background-color: white;
          @include set-position(unset, unset, absolute, 0rpx, -20rpx);
        }
      }
    }
  }
}
.scroll-right {
  height: 100vh;
  .goods-item {
    padding: 40rpx 0;
    @include grid-division(3, 24rpx);
  }
  .category-img {
    width: 100rpx;
    height: 100rpx;
  }
}
